import React from 'react';
import { useRouter } from 'next/router';
import { Cog6ToothIcon, TrashIcon } from '@heroicons/react/24/outline';
import BackIcon from '../icons/BackIcon';
import SpeakerIcon from '../icons/SpeakerIcon';
import { useTranslatorStore } from '@/store/translator';

interface TranslatorHeaderProps {
  title: string;
  onSettingsClick: () => void;
  onSpeakerClick: () => void;
  isSpeakerOn: boolean;
}

const TranslatorHeader: React.FC<TranslatorHeaderProps> = ({
  title,
  onSettingsClick,
  onSpeakerClick,
  isSpeakerOn
}) => {
  const router = useRouter();
  const clearTranslations = useTranslatorStore(state => state.clearTranslations);

  const handleBackClick = (e: React.MouseEvent) => {
    e.preventDefault();
    router.push('/');
  };

  const handleClearHistory = () => {
    if (window.confirm('确定要清除所有翻译记录吗？')) {
      clearTranslations();
    }
  };

  return (
    <div className="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-100">
      <div className="flex items-center">
        <a href="#" onClick={handleBackClick} className="mr-3">
          <BackIcon className="w-6 h-6 text-gray-600 hover:text-gray-800 transition-colors" />
        </a>
        <span className="text-lg font-medium text-gray-800">{title}</span>
      </div>
      <div className="flex items-center space-x-3">
        <button
          onClick={handleClearHistory}
          className="p-2 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors"
          title="清除历史记录"
        >
          <TrashIcon className="w-5 h-5" />
        </button>
        <button
          onClick={onSpeakerClick}
          className={`p-2 rounded-lg transition-all duration-200 ${
            isSpeakerOn 
              ? 'bg-blue-50 text-blue-600 hover:bg-blue-100' 
              : 'bg-gray-50 text-gray-400 hover:bg-gray-100'
          }`}
          title={isSpeakerOn ? '关闭自动播放' : '开启自动播放'}
        >
          <SpeakerIcon className="w-5 h-5" disabled={!isSpeakerOn} />
        </button>
        <button
          onClick={onSettingsClick}
          className="p-2 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors"
        >
          <Cog6ToothIcon className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
};

export default TranslatorHeader;